---
import BackTop from "./BackTop.astro";
import ToolButton from "./ToolButton.astro";
---

<div
   id="web-tool"
   class="hidden text-black dark:text-white rounded-full w-8 slide-in-right"
>
   <!-- 设置按钮 -->
      <ToolButton id="dial-tool-button" tooltipText="设置">
         <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-8 h-8 transition-transform hover:rotate-45"
         >
            <path
               stroke-linecap="round"
               stroke-linejoin="round"
               d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
            ></path>
            <path
               stroke-linecap="round"
               stroke-linejoin="round"
               d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"></path>
         </svg>
      </ToolButton>
   <slot />
   <!-- 返回顶部 -->
   <BackTop />
</div>

<script>
   import scrollManager from "@/utils/scrollManager.js";
   import { Dial } from 'flowbite';
   document.addEventListener("DOMContentLoaded", () => {
      const $webTool = document.getElementById("web-tool");
      const $dialToolBox = document.getElementById("dial-tool-box");
      const $dialToolButton = document.getElementById("dial-tool-button");
      const $dialContent = document.getElementById("speed-dial-menu-vertical");
      const options = {
         triggerType: "click" as const, 
         onHide: () => {
        
         },
         onShow: () => {
            
         },
         onToggle: () => {
            
         },
      };
      const instanceOptions = {
         id: "dialContent",
         override: true,
      };
      const dial = new Dial($dialToolBox, $dialToolButton, $dialContent, options, instanceOptions);
      // 事件处理函数
      const handleScroll = function (scrollTop) {
         if ($webTool && $dialToolButton && $dialContent) {
            if (scrollTop > 200) {
               $webTool.classList.remove("hidden");
            } else {
               $webTool.classList.add("hidden");
               dial.hide();
            }
         }
      };

      // 使用滚动管理器注册滚动监听器
      scrollManager.register("commonTool", handleScroll);

      // 清理函数
      return () => {
         scrollManager.unregister("commonTool");
      };
   });
</script>
